import React, { Component, Fragment } from "react";
import HttpUtil from "../utils/HttpUtil";
import {
  StyleSheet,
  View,
  FlatList,
  ActivityIndicator,
  TouchableHighlight,
  Text,
  Image,
  ToolbarAndroid
} from "react-native";
import SongDetail from "./SongDetail/SongDetail";
import App from "../../App";
import { createStackNavigator, createAppContainer } from "react-navigation";
class SongList extends Component {
  constructor() {
    super();
    this.state = {
      data: [],
      finish: false
    };
  }
  componentDidMount() {
    HttpUtil.get("https://www.mxnzp.com/api/music/recommend/list").then(res => {
      console.log(res);
      this.setState({
        data: res.data,
        finish: true
      });
    });
  }

  renderItem(item) {
    //console.log(item);
    return (
      <TouchableHighlight
        underlayColor="rgba(34,26,38,0.1)"
        onPress={() => {
          this.move2Detail(item);
        }}
      >
        <View style={{ flexDirection: "row" }}>
          <View style={{ padding: 25 }}>
            <Image
              source={{ uri: item.item.pic_small }}
              style={{ width: 100, height: 100 }}
            />
          </View>
          <View style={{ marginTop: 40 }}>
            <Text style={{ fontSize: 24 }}>{item.item.title}</Text>
            <View style={{ flexDirection: "row", marginTop: 20 }}>
              <Text>{item.item.author}</Text>
              <Text style={{ marginLeft: 20 }}>{item.item.publishtime}</Text>
            </View>
          </View>
        </View>
      </TouchableHighlight>
    );
  }
  move2Detail(item) {
    //console.log(1);
    //console.log(this.props);
    console.log(item.item.song_id);
    this.props.navigation.navigate('Detail',{id:item.item.song_id});
  }
  render() {
    if (!this.state.finish) {
      return (
        <View style={styles.container}>
          <ActivityIndicator />
        </View>
      );
    }
    return (
      <Fragment>
        <View style={styles.container}>
          <FlatList
            data={this.state.data}
            renderItem={this.renderItem.bind(this)}
          />
        </View>
      </Fragment>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    backgroundColor: "#eae7ff",
    flex: 1,
    justifyContent: "center",
  }
});

export default SongList;
